<template>
  <div class="home">
    <!-- <p> 首页</p> -->
    <my-header>今日头条</my-header>
    <error-tip/>
    <div v-if="!errorCode">
    <content-list :data="indexData"/>
      <back-top @click="backClick" v-show="isShowBack"></back-top>
     </div>
     
  <nav-bar></nav-bar>
  </div>
</template>

<script>
// @ is an alias to /src
import getData from "@/services"
import {forChsData} from '@/libs/utils'
import ErrorTip from '@/components/ErrorTip/ComErr';
import BackTop from '@/components/backTop/BackTop'

import { onMounted, computed } from 'vue'
import { useStore } from 'vuex'

import MyHeader from '@/components/Header/index' ;
import NavBar from '@/components/NavBar';
import ContentList from '@/components/Content';



export default {
  name: 'Home',
  components: {
      NavBar,
      MyHeader,
       ContentList ,
       ErrorTip,
       BackTop ,
   
  },
  setup(){
     const store = useStore(),
            state = store.state;
     onMounted(()=>{
       getData(store,forChsData(store));
     });
     const backClick =()=>{
        this.$refs.scrollContent.scrollTo(0, 0)
      }
    return {
       indexData: computed(()=> state.data),
       errorCode: computed(()=>state.errorCode),
       isShowBack:computed(()=>state.isShowBack),
       backClick
    }
  }
}
</script>
